<template>
<div class="about">
  <h2>x: {{x}}, y: {{y}}</h2>
  <hr>
  <h2 v-if="loading">LOADING...</h2>
  <h2 v-else-if="errorMsg">{{errorMsg}}</h2>
  <img v-if="result" :src="result[0].url" alt="">
</div>
</template>

<script lang="ts">

import {
  ref, watch
} from "vue"
import useMousePosition from '../hooks/useMousePosition'
import useUrlLoader from '../hooks/useUrlLoader'

interface DogResult {
  message: string
  status: string
}

interface CatResult {
  id: string
  url: string
  width: number
  height: number
}

export default {
  setup() {

    const {x, y} = useMousePosition()
    // const {loading, result, errorMsg} = useUrlLoader<DogResult>('https://dog.ceo/api/breeds/image/random')
    const {loading, result, errorMsg} = useUrlLoader<CatResult[]>('https://api.thecatapi.com/v1/images/search')

    watch(result, () => {
      if (result.value) {
        // console.log(result.value.message) // 提示
        console.log(result.value[0].url)
      }
    })

    return {
      x,
      y,
      loading, 
      result, 
      errorMsg
    }
  }
}
</script>
